<template>
    <div class="searchChildRouterPage">

        <order-box :data="liveTag" @changeData="changeSort"></order-box>

        <template v-if="isShowAll && showType === 'search_type'">
            <live-user-box :data="videoList?.result.live_user" :total="videoList?.pageinfo?.live_user.total"></live-user-box>
            <live-room-box :data="videoList?.result.live_room" :total="videoList?.pageinfo?.live_room.total" @change-data="changeLiveRoom"></live-room-box>
        </template>

        <template v-else>
            <live-room-box :data="videoList?.result.live_room" :total="videoList?.pageinfo?.live_room.total" v-if="showType === 'live'" @change-data="changeLiveRoom"></live-room-box>
            <live-user-box :data="videoList?.result" :total="videoList?.numResults"  v-else-if="showType === 'live_user'"></live-user-box>
        </template>

        <div class="paging" v-if="numPages">
            <pagin-tion :total="numPages" @changeIndex="changePage"></pagin-tion>
        </div>

    </div> 
</template>

<script lang="ts" setup>
import { onBeforeMount,ref } from 'vue'
import { getDiffTypeData,paginTion,liveRoomBox,liveUserBox,orderBox } from '../layout'
import { live } from '@/JSON/searchOrder.js'
import { change_query } from '../type'
import { useRouter } from 'vue-router'
import { baseRouteGetStatus,changeNowRoute } from '@/router/changeUrl'

interface Props{
    keyword:string
}
const props = defineProps<Props>()
const router = useRouter()
let videoList = ref()
let liveTag = ref([live])
const map = new Map()
let numPages = ref<number | null>()
let isShowAll = ref<boolean>(true)
let showType = ref<string>('search_type')

onBeforeMount(() => {
    baseRouteGetStatus(router,map)
    const obj = changeNowRoute(router,map)
    if (map.has('search_type')) {
        showType.value = map.get('search_type')
        isShowAll.value = false
    }
    initData(obj)
})
function initData(other?:change_query){
    getDiffTypeData('live',props.keyword,other).then(res => {
        console.log('live',res)
        if (!numPages.value){
            numPages.value = res.data.numPages
        }
        videoList.value = res.data
    }).catch(res => {
        alert('video数据加载失败啦')
    })
}
function changePage(val:number){
    if (val === 1) map.delete('page')
    else map.set('page',val)
    const obj = changeNowRoute(router,map)
    return initData(obj)
}
/**
 * 
 * @param title query中的key
 * @param label query中的value
 * 
 */
function changeSort(title:string,label:string){
    showType.value = label

    if (label === 'search_type') isShowAll.value = true
    else isShowAll.value = false

    numPages.value = null
    map.set(title,label)
    map.delete('page')
    const obj = changeNowRoute(router,map)
    return initData(obj)
}
function changeLiveRoom(title:string,label:string){
    numPages.value = null
    map.set(title,label)
    map.delete('page')
    const obj = changeNowRoute(router,map)
    return initData(obj)
}
</script>

<style lang="scss" scoped>
@import url(../../../assets/css/publicNodeStyle.scss);
</style>